<template>
    <div class="plat-main">
        <h3>平台能力</h3>
        <div class="plat-title">
            <li v-for="(item,type) in titleList" :key="type" :class="showType === item.type ? 'active-title' : '' " @click="changeContent(item.type)">
                {{item.name}}
            </li>
        </div>
        <div class="plat-middle" v-show="showType === 1">
            <li v-for="(item,type) in knowledgeList" :key="type">
                    <div class="palt-list-icon"><img :src="item.img"/></div>
                        <p class="list-title">{{item.title}}</p>
                        <p class="list-desc">{{item.desc}}</p>
            </li>
        </div>
        <div class="plat-middle" v-show="showType === 2">
            <li v-for="(item,type) in dataList" :key="type">
                    <div class="palt-list-icon"><img :src="item.img"/></div>
                        <p class="list-title">{{item.title}}</p>
                        <p class="list-desc">{{item.desc}}</p>
            </li>
        </div>
        <div class="plat-middle" v-show="showType === 3">
            <li v-for="(item,type) in applyList" :key="type">
                    <div class="palt-list-icon"><img :src="item.img"/></div>
                        <p class="list-title">{{item.title}}</p>
                        <p class="list-desc">{{item.desc}}</p>
            </li>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            showType: 1,
            titleList:[
                {
                    name:"知识平台能力",
                    type:1
                },
                {
                    name:"数据治理能力",
                    type:2
                },
                {
                    name:"数据应用能力",
                    type:3
                },
            ],
            knowledgeList:[
               {
                    title:"图谱管理",
                    desc:"通过图谱技术，融合海量多源异构知识，提供精准高效的检索、问答、推荐等一站式智能应用",
                    img:require("@/assets/img/u1.png")
                },
                {
                    title:"文档智能",
                    desc:"能够与知识体系搭建系统实现数据共享，能够与知识库系统进行对接，实现数据自动载入标注平台",
                    img:require("@/assets/img/u2.png")
                },
                {
                    title:"收集器管理",
                    desc:"能够实现结构化数据本体抽取、实体融合，构建结构化知识图谱融合。同时支持对数据源管理、数据加工等功能",
                    img:require("@/assets/img/u3.png")
                },
                {
                    title:"指标库",
                    desc:"对平台的原生指标、派生指标、组合指标进行统一规范管理，在数据融通基础上提供指标模型，构建服务业务的指标支撑体系",
                    img:require("@/assets/img/u4.png")
                },
                {
                    title:"标签库",
                    desc:"对全平台标签进行规范管理，可通过标签查询被标注主体的各类信息，通过标签对数据进行分类标注、特征描述",
                    img:require("@/assets/img/u5.png")
                },
            ],
            dataList:[
               {
                    title:"图谱管理",
                    desc:"通过图谱技术，融合海量多源异构知识，提供精准高效的检索、问答、推荐等一站式智能应用",
                    img:require("@/assets/img/u1.png")
                },
                {
                    title:"文档智能",
                    desc:"能够与知识体系搭建系统实现数据共享，能够与知识库系统进行对接，实现数据自动载入标注平台",
                    img:require("@/assets/img/u2.png")
                }
            ],
            applyList:[
                {
                    title:"指标库",
                    desc:"对平台的原生指标、派生指标、组合指标进行统一规范管理，在数据融通基础上提供指标模型，构建服务业务的指标支撑体系",
                    img:require("@/assets/img/u4.png")
                },
                {
                    title:"标签库",
                    desc:"对全平台标签进行规范管理，可通过标签查询被标注主体的各类信息，通过标签对数据进行分类标注、特征描述",
                    img:require("@/assets/img/u5.png")
                }
            ]
        }
    },
    methods:{
        changeContent(type){
            this.showType=type;
        }
    }
}
</script>
<style lang="scss" scoped>
.plat-main {
    margin-top: 40px;
    height: 534px;
    h3 {
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        position: relative;
            &::after {
                position: absolute;
                width: 55px;
                height: 4px;
                background-color: #FFD33BFF;
                content: "";
                bottom: -18px;
                left: calc(50% - 25px);
    }
    }
}

.plat-title {
    text-align: center;
    cursor: pointer;
    margin-top: 40px;
    li {
        display: inline;
        font-size: 20px;
        margin-right: 20px;
    }
}

.active-title {
    color: #1C4EFFFF;
}

.plat-middle {
    height: 310px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    margin-top: 20px;
    li {
      list-style: none;
      width: 220px;
      padding: 20px;
      margin: 0 10px;
      text-align: center;
      box-shadow: 0px 0px 11px 0px rgba(14, 16, 76, 0.1);
      background-color: #ffffff;
      border: 1px solid transparent;
      border-radius: 5px;
      .palt-list-icon {
        background-color: #488afb;
        width: 66px;
        height: 66px;
        overflow: hidden;
        border-radius: 50%;
        margin: auto;
        margin-top: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      img {
        width: 37px;
        height: 37px;
      }
      p {
        text-align: center;
        font-size: 14px;
        color: #333333FF;
      }
      .list-desc {
        height: 130px;
        color: #333333FF;
        font-size: 16px;
      }
      .list-title {
        margin: 15px 0;
        font-size: 18px;
        color: #333333FF;
        font-weight: bold;
      }
      &:hover {
        border: 1px solid #1c4eff;
        color: #1C4EFFFF;
        p {
          color: #1C4EFFFF;
        }
        .palt-list-icon {
          background-color: #1C4EFFFF;
        }
      }
    }
}

</style>